<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统登录页面</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_register.css">
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <a href="./blog_all_list.html">推荐文章</a>
    </div>
    <!-- 贯穿整个页面的容器 -->
    <div class="login-container">
        <!-- 垂直居中的注册框 -->
        <div class="login-frame">
            <h2>欢迎注册个人博客</h2>
            <div class="row">
                <span>用户名:</span>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="row">
                <span>密码:</span>
                <input type="password" id="password1" placeholder="请输入密码">
            </div>
            <div class="row">
                <span>确认密码:</span>
                <input type="password" id="password2" placeholder="请确认密码">
            </div>
            <div class="srow">
                <button id="submit" onclick="myblog()">注册</button>
            </div>
            <div class="reg">
                <a href="./blog_login.html">已有账号，去登录！</a>
            </div>
        </div>
    </div>
</body>
<script>
    function myblog() {
        // 1、 输入框的非空校验
        let _username = jQuery("#username");
        let _password1 = jQuery("#password1");
        let _password2 = jQuery("#password2");
        if (_username.val() == "") {
            alert("注册时，请输入用户名!")
            _username.focus();//聚焦于用户名输入框中
            return;
        }
        if (_password1.val() == "") {
            alert("注册时，请输入密码!");
            _password1.focus();
            return;
        }
        if (_password2.val() == "") {
            alert("注册时，请输入确认密码!");
            _password2.focus();
            return;
        }
        // 2、判断两次密码是否一致问题
        if (_password1.val() != _password2.val()) {
            alert("很抱歉，输入的两次密码不完全一致!")
            _password2.focus();
            return;
        }
        // 3、通过ajax将用户信息发送给后端
        jQuery.ajax({
            url: "/user/register",
            type: "POST",
            data: { "username": _username.val(), "password": _password1.val() },
            //后端给前端返回的数据
            success: function (result) {
                if (result != null && result.code == 200 && result.data == 1) {
                    if (confirm("恭喜你：注册成功了，是否要跳转到登录界面？")) {
                        location.href = "/blog_login.html";
                    } else {
                        _username.val('');
                        _password1.val('');
                        _password2.val('');
                    }
                } else {
                    alert("注册失败，请稍候重新尝试注册功能!");
                }
            }
        });
    }

</script>

</html>